import React, {useEffect} from 'react';
import {Button, Col, Form, Input, Modal, Row} from 'antd';
import {formInputRules, numberRules, phoneRules} from '@/utils/rules';
import {addOrModifyFugeplace, queryFugeplace} from '@/services/emergency';
import LngLatChoose from '@/components/LngLatChoose'
import {useRequest} from "ahooks";
import RegionCascader from "@/components/RegionCascader";
import useRegions from "@/hooks/useRegions";
import {filterEmpty} from '@/utils/methods';

const EditReport: React.FC<any> = ({shelterId, onSuccess, dispatch, ...props}: any) => {
  const [regions] = useRegions();
  const [form] = Form.useForm();

  const {
    run: runSubmit,
    loading: loadingSubmit
  } = useRequest((values: any) => {
    const params = filterEmpty({
      originValues: values,
      keepEmpty: true,
    });
    shelterId && (params.id = shelterId);
    params.zoneCode =  params.zoneCode[params.zoneCode.length - 1]
    if (params.lnglat) {
      params.gpsx = params.lnglat.lng;
      params.gpsy = params.lnglat.lat;
      delete params.lnglat;
    }
    return addOrModifyFugeplace(params)
  }, {
    manual: true,
    onSuccess(res: any) {
      dispatch({
        clear: true,
        open: false
      })
      onSuccess && onSuccess(res);
    }
  });
  const {
    run: runDetail,
  } = useRequest(() => {
    return queryFugeplace({
      id: shelterId,
    }).then((res: any) => {
      form.setFieldsValue({
        address: res.address,
        coveredArea: res.coveredArea,
        dutyNumber: res.dutyNumber,
        responsiblePerson: res.responsiblePerson,
        typeRemark: res.typeRemark,
        phoneNumber: res.phoneNumber,
        name: res.name,
        containCount: res.containCount,
        department: res.department,
        lnglat: { lng: res.gpsx, lat: res.gpsy },
        zoneCode: res.zoneCode,
      });
      return res;
    })
  }, {
    manual: true
  })


  useEffect(() => {
    if (props.open) {
      if(shelterId){
        Promise.resolve().then(()=>{
          runDetail();
        })
      }
    } else {
      form.resetFields();
    }
  }, [props.open]);
  return (
    <Modal
      {...props}
      onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }}
      footer={[
        <Button key="cancel" onClick={() => {
          dispatch({
            clear: true,
            open: false
          })
        }}>
          关闭
        </Button>,
        <Button
          type="primary"
          key="submit"
          loading={loadingSubmit}
          onClick={async () => {
            const value: any = await form.validateFields()
            runSubmit(value)
          }}
        >
          保存
        </Button>,
      ]}
    >
      <Form form={form}  labelCol={{ span: 9, offset: 0 }}>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="name"
              label="应急避难所名称"
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写应急避难所名称',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="zoneCode"
              label="行政区划"
              labelCol={{ span: 6 }}
              style={{ marginBottom: '0' }}
            >
              <RegionCascader placeholder="请选择行政区划" options={regions}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="typeRemark"
              label="类别"
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写类别',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="containCount"
              label="容纳人数"
              labelCol={{ span: 6 }}
              rules={[
                ...numberRules,
                {
                  required: true,
                  message: '请填写容纳人数',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="coveredArea"
              label="建筑面积"
              validateTrigger="onBlur"
              rules={[
                ...numberRules,
                {
                  required: true,
                  message: '请填写建筑面积',
                },
              ]}
            >
              <Input addonAfter="㎡" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="lnglat"
              label="经纬度"
              labelCol={{ span: 6 }}
              rules={[
                {
                  required: true,
                  message: '请选择经纬度',
                },
              ]}
            >
              <LngLatChoose />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="address"
              label="地址"
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写地址',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="responsiblePerson"
              label="负责人"
              labelCol={{ span: 6 }}
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写负责人',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="phoneNumber"
              label="手机"
              validateTrigger="onBlur"
              rules={[
                ...phoneRules,
                {
                  required: true,
                  message: '请填写手机',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="department"
              label="所属单位"
              labelCol={{ span: 6 }}
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写所属单位',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="dutyNumber"
              label="值班电话"
              rules={[...phoneRules]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

export default EditReport;
